<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 方法一:只初始化颜色数组,如果需要名字和值,再到数组中检索对应的标签文本,
			// 方法二:初始化两个数组,分别是颜色的名字和颜色的值,如果需要直接从数组中提取
			let colorsName=[];//表示所有的颜色的名字
			let colorsValue=[];//表示所有的颜色的值
			function init(){
				let xhr=new XMLHttpRequest();
				xhr.open("GET","color1.xml",true)//true表示异步
				xhr.send();
				//接收、解析、显示数据
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){//请求完成,服务器正常
						let data=xhr.responseXML
						colorsName=data.querySelectorAll("color>name")
						colorsValue=data.querySelectorAll("color>value")
						//将颜色的名字动态加载到下拉列表中
						let s=document.querySelector("select")
						for (let i = 0; i < colorsName.length; i++) {
							//将第i个颜色的名字-->下拉列表的第i个选项中
							s.options[i]=new Option(colorsName[i].innerHTML)
						}
						document.body.setAttribute("style","background-color:"+colorsValue[0].innerHTML+";")
					}
				}
			}
			function change(){
				//先知道用户选择的是哪一个颜色
				let s=document.querySelector("select")
				let index=s.selectedIndex//保存了用户选择的索引值
				document.body.setAttribute("style","background-color:"+colorsValue[index].innerHTML+";")
			}
		</script>
	</head>
	<body onload="init()">
		请选择网页背景色：<select onchange="change()"></select>
	</body>
</html>
